<template>
    <el-tabs v-model="tabsStore.selectTab" type="border-card" closable class="demo-tabs"
        @tab-remove="handleRemove" @tab-change="handleChange">
        <!-- tab选中后才显示pane区域的内容 -->
        <el-tab-pane v-for="item in tabsStore.tabs" :closable="false" :key="item.name" :label="item.title" :name="item.name">
            <!-- 路由视图如果放在这里，会被多次挂载，极大增加了系统负担 -->
            <!-- <RouterView></RouterView> -->
        </el-tab-pane>
        <RouterView></RouterView>
    </el-tabs>
</template>

<script setup>
import { useTabsStore } from '@/stores/tabs'
import { useRouter } from 'vue-router'

// 获取全局状态中的tabs
const tabsStore = useTabsStore()
// 获取路由对象
const router = useRouter()

/**
 * 标签切换
 * @param {*} targetName 标签对象的name属性
 */
const handleChange = targetName => {
    // 获取tab对象中的path属性
    const tab = tabsStore.tabs.find(item => item.name === targetName)
    // 跳转到对应菜单
    router.push(tab.path)
    // 左侧菜单激活切换
    tabsStore.currentPath = tab.path
}

/**
 * 标签移除
 * @param {*} targetName  标签对象的name属性
 */
const handleRemove = targetName => {
    // 只剩一个tab标签时，不能删除
    if(tabsStore.tabs.length < 2) {
        return
    }
    // 获取当前选中的标签name属性
    let activeName = tabsStore.selectTab
    // 如果要移除的是当前选中的标签，需要额外处理
    if (activeName === targetName) {
        tabsStore.tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
                // 新的选中目标
                // 1.如果存在下一个标签，选择后一个标签
                // 2.如果当前选择并且删除的是末尾标签，选择前一个标签
                const nextTab = tabsStore.tabs[index + 1] || tabsStore.tabs[index - 1]
                if (nextTab) {
                    activeName = nextTab.name
                    // 重新选中目标标签
                    tabsStore.selectTab = activeName
                    // 手动切换
                    handleChange(activeName)
                }
            }
        })
    }
    // 从数组中移除
    tabsStore.tabs = tabsStore.tabs.filter(tab => tab.name !== targetName)
}
</script>

<style scoped>
/* 将tab区域的高度扩展为100% */
.demo-tabs {
    height: 100%;
    max-height: 100%;
    overflow: auto;
}
</style>